<template>
	<div class="wrapper">
		<!----header---->
		<header>
			<p>用户登录</p>
		</header>

		<!----表单部分---->
		<ul class="form-box">
			<li>
				<img src="../assets/elemeicon.png" width="120%">
			</li>
			<li>
				<div class="title">
					手机号码：
				</div>
				<div class="content">
					<input type="text" v-model="userId" placeholder="手机号码">
				</div>
			</li>
			<li>
				<div class="title">
					密码：
				</div>
				<div class="content">
					<input type="password" v-model="password" placeholder="密码">
				</div>
			</li>
		</ul>

		<div class="button-login">
			<button @click="login">登录</button>
		</div>
		<div class="button-register">
			<button @click="register">去注册</button>
		</div>

		<!---bottom---->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';

export default {
	name: 'Login',
	data() {
		return {
			userId: '',
			password: ''
		}
	},

	methods: {
		login() {
			if (this.userId == '') {
				alert('手机号码不能为空！');
				return;
			}
			if (this.password == '') {
				alert('密码不能为空！');
				return;
			}

			//login request
			this.$axios.get('UserController/getUserByIdByPass', {
				params: {
					userId: this.userId,
					password: this.password
				}
			}).then(response => {
				let user = response.data.data;

				if (user == null) {
					alert('用户名或密码不正确！');
				} else {
					//as sessionStorage is limited
					//so userImg needed to be empty for avioding overflow
					user.userImg = '';
					this.$setSessionStorage('user', user);
					this.$router.go(-1);
				}
			}).catch(error => {
				console.error(error);
			});
		},
		register() {
			this.$router.push({ path: 'register' });
		}
	},

	components: {
		Footer
	}
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 表单部分 ******************/
.wrapper .form-box {
	width: 100%;
	margin-top: 12vw;
}

.wrapper .form-box li {
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
	display: flex;
	align-items: center;
}

.wrapper .form-box li img{
	width: 45vw;
	height: 18vw;
	display: block;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
	align-items: center;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	/*limit a space for title*/
	font-size: 3vw;
	font-weight: 700;
	color: #666;
}

.wrapper .form-box li .content {
	flex: 1;
	/*the space left*/
}

.wrapper .form-box li .content input {
	border: none;
	outline: none;
	width: 100%;
	height: 4vw;
	font-size: 3vw;

}

.wrapper .button-login {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #fff;
	background-color: #38ca73;
	border-radius: 4px;
	border: none;
	outline: none;
}

.wrapper .button-register {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
	width: 100%;
	height: 10vw;
	font-size: 3.8vw;
	font-weight: 700;
	color: #666;
	background-color: #eee;
	border: solid 1px #DDD;
	border-radius: 4px;
	border: none;
	outline: none;
}
</style>